@import '../medias.css';

@layer base {
	:root {
		/* global padding strategy for common container */
		--pad-max-width: 100vw;
		--pad-min-padding-x: 16px;
		--pad-padding-x: max(var(--pad-min-padding-x), calc((100vw - var(--pad-max-width)) / 2));

		@media (--tablet) {
			--pad-min-padding-x: 40px;
			--pad-max-width: 1024px;
		}

		@media (--desktop) {
			--pad-max-width: 1440px;
			--pad-min-padding-x: 160px;
		}
	}
}

@utility max-w-pad {
	max-width: 100vw;
	padding-right: var(--pad-padding-x);
	padding-left: var(--pad-padding-x);
}
